<template>
  <div>
    <a-skeleton :loading="loading" active>
      <SlickList :distance="40" lockAxis="y" v-model="items">
        <SlickItem v-for="(val,index) in ItemValue" :key="index" :index="index">
          <div class="CardDescribe">{{$language(val.title)}}</div>
          <a-card
            :title="$language(val.meta.cardDescribe)"
            :bordered="val.meta.bordered"
            :hoverable="val.meta.hoverable"
          >
            <span
              v-if="$language(val.meta.extra)?$language(val.meta.extra):''"
              slot="extra"
            >{{$language(val.meta.extra)}}</span>

            <div v-if="val.showWay==='layoutTopBottom'">
              <a-row v-for="(Row,index) in getRow(val.cardItem)" :key="index" class="Arow">
                <a-col
                  :xxl="6"
                  :lg="12"
                  :md="12"
                  :xl="(24/Row.length)"
                  v-for="(item,itemIndex) in Row"
                  :key="itemIndex"
                >
                  <keep-alive>
                    <component
                      :is="getFormat(item,Row.position,1)"
                      :props="setItem(item,Row.position,1)"
                    ></component>
                  </keep-alive>
                </a-col>
              </a-row>
            </div>

            <a-row v-if="val.showWay==='layoutLeftRight'">
              <a-col :span="8">
                <component
                  :is="getFormat(val.cardItem,'left',0)"
                  :props="setItem(val.cardItem,'left',0)"
                ></component>
              </a-col>
              <a-col :span="16">
                <div>
                  <a-row v-for="(Row,index) in getRow(val.cardItem)" :key="index" class="Arow">
                    <a-col :span="24/Row.length" v-for="(item,itemIndex) in Row" :key="itemIndex">
                      <keep-alive>
                        <component
                          :is="getFormat(item,item.position,1)"
                          :props="setItem(item,item.position,1)"
                        ></component>
                      </keep-alive>
                    </a-col>
                  </a-row>
                </div>
              </a-col>
            </a-row>
            <a-col v-for="(item,index) in val.operation" :key="index">
              <NewCard :props="filterNewCard(item)" />
            </a-col>
          </a-card>
        </SlickItem>
      </SlickList>
    </a-skeleton>
  </div>
</template>
<script lang='ts'>
const SlickList = require("vue-slicksort").SlickList;
const SlickItem = require("vue-slicksort").SlickItem;
const Pie = () => import("./Chart/Pie/Pie.vue");
const Columnar = () => import("./Chart/Columnar/Columnar.vue");
const SmallCardBorder = () => import("./HomePage/SmallCardBorder.vue");
const NewCard = () => import("./HomePage/NewCard.vue");
import { Component, Vue, Prop, Watch } from "vue-property-decorator";

@Component({
  components: {
    SlickList,
    SlickItem,
    NewCard
  }
})
export default class Dynamic extends Vue {
  @Prop({ type: Array, required: true }) Card!: any[];
  @Prop({ type: Boolean, required: true }) loading!: boolean;
  Pie: Object = SmallCardBorder;
  ItemValue: any[] = this.Card[0].widget ? this.Card[0].widget : [];
  items: Array<string> = [];

  @Watch("items")
  newItem(newValue: Array<string>, oldValue: Array<string>) {
    let newArray: any[] = [];
    const _this: any = this;
    newValue.map((val, index) => {
      this.ItemValue.map((item: any, index) => {
        if (val === _this.$language(item.title)) {
          newArray.push(item);
        }
      });
    });
    this.ItemValue = newArray;
  }

  created() {
    const _this: any = this;
    const value = this.Card;
    if (value && value.length > 0 && value[0].widget.length > 0) {
      let SlickItem: any[] = [];
      value[0].widget.map((item, index) => {
        SlickItem.push(_this.$language(item.title));
      });
      this.items = SlickItem;
    }
  }

  getFormat(val, position, valType) {
    let type = "";
    if (!valType) {
      val.map(item => {
        if (item.position === position) {
          type = item.type;
        }
      });
    } else {
      type = val.type;
    }

    switch (type) {
      case "Pie":
        return Pie;
        break;
      case "Columnar":
        return Columnar;
        break;
      case "SmallCardBorder":
        return SmallCardBorder;
        break;
      case "Card":
        return NewCard;
        break;
    }
  }

  setItem(val, position, localtion) {
    const _this: any = this;
    let type = "";
    let value: any = "";
    if (!localtion) {
      val.map(item => {
        if (item.position === position) {
          type = item.type;
          value = item;
        }
      });
    } else {
      type = val.type;
      value = val;
    }
    switch (type) {
      case "SmallCardBorder":
        return {
          title: _this.$language(value.title),
          count: value.count,
          color: value.color
        };
        break;
      case "Pie":
        return {
          sourceData: value.sourceData,
          Height: value.height
        };
        break;
      case "Columnar":
        return {
          sourceData: value.sourceData,
          Height: value.height
        };
        break;
      case "Card":
        return {
          title: _this.$language(value.title),
          color: value.color ? value.color : "#ccc",
          fontSize: value.fontSize,
          icon: value.icon,
          link: value.link
        };
        break;
    }
  }

  getRow(val) {
    let newArray: any[] = [];
    let ArrayLeft: any[] = [];
    let ArrayRight: any[] = [];
    val.map(item => {
      if (item.position === "top") {
        ArrayLeft.push(item);
      } else if (item.position === "bottom") {
        ArrayRight.push(item);
      }
    });
    newArray.push(ArrayLeft);
    newArray.push(ArrayRight);
    return newArray;
  }

  filterNewCard(value) {
    const _this: any = this;
    return {
      title: _this.$language(value.title),
      icon: value.icon,
      routes: value.routes
    };
  }
}
</script>
<style lang="less" scoped>
.CardDescribe {
  border-left: 5px solid red;
  padding-left: 10px;
  margin: 20px 0px 20px 0px;
  font-size: 20px;
  font-weight: bold;
}

.Arow {
  margin-top: 20px;
}
</style>
